﻿<template>
  <div class="wrapper">
    <!-- 面包屑导航栏区域 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>销售管理</el-breadcrumb-item>
      <el-breadcrumb-item>销售明细管理</el-breadcrumb-item>
    </el-breadcrumb>


   
     <el-card>
        <el-table
          :data="tableData"
          style="width: 100%"
          :header-cell-style="{
            background: 'rgb(55,61,65)',
            color: '#fff',
            'text-align': 'center',
          }"
          :cell-style="{ 'text-align': 'center' }"
        >
          <el-table-column prop="documentNumber" label="销售单据号">
          </el-table-column>
          <el-table-column prop="outTime" label="出库时间"> </el-table-column>
          <el-table-column prop="totalPrice" label="总金额"> </el-table-column>
          <el-table-column prop="chargeMan" label="负责人"> </el-table-column>
          <el-table-column prop="remarks" label="备注"> </el-table-column>
          <el-table-column label="明细" width="260">
            <template slot-scope="scope">
              <el-button
                size="small"
                type="text1"
                @click="sale_detail(scope.$index, tableData)"
                >销售明细
              </el-button>
              <el-button
                size="small"
                type="text1"
                @click="addSale_detail(scope.$index, tableData)"
                >添加销售明细</el-button
              >
            </template>
          </el-table-column>
          <el-table-column label="删除">
             <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                    type="text"
                    size="small"
                  >
                    删除
                  </el-button>
             </template>
          </el-table-column>
        </el-table>
    
      <!-- 销售明细 -->
      <el-dialog title="销售明细" :visible.sync="dialogVisable" width="40%">
        <el-table
          :data="tableData_detail"
          border
          :header-cell-style="{
            background: 'rgb(55,61,65)',
            color: '#fff',
            'text-align': 'center',
          }"
          :cell-style="{ 'text-align': 'center' }"
          style="width: 100%"
        >
          <el-table-column prop="goods_name" label="药品名称" width="150">
          </el-table-column>
          <el-table-column prop="entry_number" label="数量" width="150">
          </el-table-column>
          <el-table-column prop="remarks" label="备注" width="190">
          </el-table-column>
          <el-table-column prop="status" label="操作">
              <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteRow(scope.$index, tableData_detail)"
                    type="text"
                    size="small"
                  >
                    删除
                  </el-button>
             </template>
            
         </el-table-column>
        </el-table>
      </el-dialog>

      <!-- 添加销售明细 -->
<el-dialog
  title="添加销售明细"
  :visible.sync="dialogVisable1"
  width="40%"
  >
  <el-form label-position="top" :model="itemInfo">
      <el-form-item label="药品类别">
      <el-select style="width:100%;" v-model="itemInfo.goods_type"  size="normal"  placeholder="请选择">
              <el-option
                v-for="item in types"
                :key="item.id"
                :label="item.categoryName"
                :value="item.categoryName">
              </el-option>
            </el-select>
      <!-- <el-input v-model="itemInfo.category_name"></el-input> -->
    </el-form-item>
    <el-form-item label="药品名称">
      <el-select style="width:100%;" v-model="itemInfo.goods_name"  size="normal"  placeholder="--请选择--">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value1">
              </el-option>
            </el-select>
    
    </el-form-item>
    <el-form-item label="销售数量">
      <el-input v-model="itemInfo.sale_number"></el-input>
    </el-form-item>
    <el-form-item label="备注">
      <el-input type="textarea"  v-model="itemInfo.remarks"></el-input>
    </el-form-item> 
    
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisable1 = false">关闭</el-button>
    <el-button type="primary" @click="addSale" :plain="true">添加</el-button>
  </span>
</el-dialog>
     </el-card>
  </div>
</template>

<script>
import axios from 'axios'; 
export default {
  components: {},
  props: {},
  data() {
    return {
      // 对话框
      dialogVisable: false,
      dialogVisable1: false,
      tableData_detail: [],
      employeeData: {
        // name:'',
        // sex:'',
        // age:'',
        // phone:'',
        // address:''
      },
      tableData: [],
      types: [],
      value1: "",
      itemInfo: {
        remarks: "",
        sale_number: "",
        goods_name: "",
        goods_type: "",
      },
    };
  },
  watch: {},

  computed: {},
  methods: {
    saleInit(){
        axios({
              url:'http://162.14.65.162:9090/myblog/outbound/list',   
               method:'get'}).then((res)=>{
                    //请求成功的时候执行
                    console.log('后端响应回来的内容',res);
                    //判断后端返回来的内容是成功的还是失败的
                    if(res.data.code === 200){
                        //服务器操作成功
                        this.tableData=res.data.data;
                    }else{
                        //服务器操作失败
                        alert('服务器报错 请稍后重试')
                    }
                }).catch(function(err){
                    //请求失败的时候执行
                    console.log('请求失败的原因：',err);
                })
    },
    goodsTypeInit(){
         axios({
              url:'http://162.14.65.162:9090/myblog/category/getall',   
               method:'get'}).then((res)=>{
                    //请求成功的时候执行
                    console.log('后端响应回来的内容',res);
                    //判断后端返回来的内容是成功的还是失败的
                    if(res.data.code === 200){
                        //服务器操作成功
                        this.types=res.data.data;
                       
                    }else{
                        //服务器操作失败
                        alert('服务器报错 请稍后重试')
                    }
                }).catch(function(err){
                    //请求失败的时候执行
                    console.log('请求失败的原因：',err);
                })
    },
    //销售明细
    sale_detail(index, tab) {
      this.tableData_detail.pop();
      this.dialogVisable = true;
       axios({
              url:'http://162.14.65.162:9090/myblog/outbound/get',   
               method:'post',
               params:{
                Document_number:tab[index].documentNumber
               }
               }).then((res)=>{
                    //请求成功的时候执行
                    console.log('后端响应回来的内容',res);
                    //判断后端返回来的内容是成功的还是失败的
                    if(res.data.code === 200){
                        //服务器操作成功
                        console.log(tab[index].documentNumber)
                    }else{
                        //服务器操作失败
                        alert('服务器报错 请稍后重试')
                    }
                }).catch(function(err){
                    //请求失败的时候执行
                    console.log('请求失败的原因：',err);
                })
      this.tableData_detail.push(tab[index]);
     
    },
    //添加销售明细
    addSale_detail(index, tab) {
      this.dialogVisable1 = true;
      this.goodsTypeInit();
    },

    //删除操作
    deleteRow(index, tab) {
      console.log(tab[index].sale_document);
    },
    //添加销售明细
    addSale(){
      this.dialogVisable1=false;
      this.$message({
          message: '添加成功！',
          type: 'success'
        });
       
    }
  },
  created() {},
  mounted() {
     this.saleInit()
  },
};
</script>
<style lang="less" scoped>
.el-button--text1 {
  color: red;
  border: none;
  background-color: transparent;
}
.el-button--text {
  color: green;
}
</style>